<template>
  <!-- 左右分离三角形板块 -->
  <div class="serverBox container-fluid">
    <div class="row justify-content-center">
      <div class="col-9">
        <!-- 内容 -->
        <div class="row justify-content-between server">
          <div class="col-md-4 col-12 left">
            <p>{{result.title}}</p>
            <p>
              {{result.info}}
            </p>
          </div>
          <div class="col-md-6 col-12 right">
            <!-- 双个球 -->
            <div class="row justify-content-md-center justify-content-center">
              <div :class="[key==0?'col-md-7':'col-md-6','col-12', 'circle']" v-for="(item,key) in result.children" :key="item.id">
                <div class="imgBox">
                  <img src="http://cereshop.oss-cn-shenzhen.aliyuncs.com/0000/2020/08/fcb3d32e-00e7-4f12-a489-872a8f7db147.png">
                  <p>齐全的文档</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      "result": {
        "title": "更好的服务",
        "info": "齐全的文档、全面的培训服务、贴心的售后支持Cereshop致力于帮助客户打造卓越的电商团队",
        "children":[
          {"id":0,"imgUrl":"http://cereshop.oss-cn-shenzhen.aliyuncs.com/0000/2020/08/fcb3d32e-00e7-4f12-a489-872a8f7db147.png",info:"齐全的文档"},
          {"id":2,"imgUrl":"http://cereshop.oss-cn-shenzhen.aliyuncs.com/0000/2020/08/fcb3d32e-00e7-4f12-a489-872a8f7db147.png",info:"齐全的文档"},
          {"id":3,"imgUrl":"http://cereshop.oss-cn-shenzhen.aliyuncs.com/0000/2020/08/fcb3d32e-00e7-4f12-a489-872a8f7db147.png",info:"齐全的文档"},
        ]
      }
    }
  }
}
</script>

<style lang="less" scoped>
.serverBox {
  padding: 5.44rem 0;
  .server {
    display: flex;
    align-items: center;
    .left {
      margin-top: 2rem;
      // padding: 7.44rem 0;
      p:nth-child(1) {
        font-size: 3rem;
        font-family: PingFang SC;
        font-weight: 500;
        color: rgba(51, 51, 51, 1);
      }
      p:nth-child(2) {
        font-size: 1.13rem;
        font-family: PingFang SC;
        font-weight: 400;
        color: rgba(102, 102, 102, 1);
      }
    }
    .right {
      margin-top: 2rem;
      width: 100%;
      .circle {
        display: flex;
        flex-direction: column;
        align-items: center;
        // text-align: center;
        .imgBox {
          margin-top: 2rem;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          width: 14rem;
          height: 14rem;
          text-align: center;
          border-radius: 50%;
          box-shadow: 0rem 0rem 1rem 0rem rgba(51, 51, 51, 0.15);
          img {
            width: 50%;
          }
          p {
            margin-top: 1rem;
            font-size: 1.13rem;
            font-family: PingFang SC;
            font-weight: 400;
            color: rgba(51, 51, 51, 1);
          }
        }
      }
    }
  }
}
</style>